<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Simple Flat Form with Spinning Loader</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>


  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Nunito:400,300,700'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
  <div class="form-container flip">
    <form class="login-form">
      <h3 class="title">Hello.</h3>
      <div class="form-group" id="username">
        <input class="form-input" tooltip-class="username-tooltip" placeholder="Username" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required="true"></input>
        <span id="username-tool"class="tooltip username-tooltip">What's your username?</span>
      </div>
      <div class="form-group" id="password">
        <input type="password" class="form-input" tooltip-class="password-tooltip" placeholder="Password"></input>
        <span class="tooltip password-tooltip">What's your password?</span>
      </div>
      <div class="form-group">
        <button onclick="clickListener();"class="login-button">Login</button>
        <input class="remember-checkbox"type="checkbox"></input>
        <p class="remember-p">Remember me</p>
      </div>
    </form>
    <div class="loading">
      <div class="loading-spinner-large" style="display: none;"></div>
      <div class="loading-spinner-small" style="display: none;"></div>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
